import createG2 from 'g2-react';
import { Stat } from 'g2';
import React from 'react';
import ReactDOM from 'react-dom';
import ajax from '../../../../utils/ajax';
 
const Line = createG2(chart => {   //线图
  chart.axis('count', {//设置x轴别名离轴的距离
     titleOffset: 50,
  });
  chart.col('count', {//为x轴设置别名
     alias:'统计',
  });

  chart.axis('showDay', {//设置y轴别名离轴的距离
     titleOffset: 40
  });
  chart.col('showDay', {//为y轴设置别名
     alias:'日期',
  });

  chart.legend('name',{ 
     position: 'bottom', // 设置图例的显示位置
     marker: 'square',// 设置图例标记
  });

  chart.line().position('showDay*count').color('name').size(2);
  chart.render();
});

const paramData={};
/**
 * 线型图
 */
class LineChart extends React.Component {

  constructor(props) {
    super(props);
    this.initLineData();
  }

  state = {
      data:[],
      width: 500,
      height: 500,
      plotCfg: {
        margin: [50, 100, 90, 120],
      },
      forceFit: true, //自适应
      nowDay:new Date().format('yyyyMMdd'),//现在时间
  };

  initLineData(){
    var self = this;
    paramData.day=this.state.nowDay;
    paramData.week=2;//两周时间
    const url = '/statistic/getMuseumHistoryAppointmentOrderInfo';
      ajax.post({
      url: url,
      async: false,//必须用同步请求，否则数据显示异常
      params:paramData,
      success: function (res) {
        self.state.data=res.data;
      }
    })
  }

  render() {
    return (
      <div>
        <Line
          data={this.state.data}
          width={this.state.width}
          height={this.state.height}
          plotCfg={this.state.plotCfg}
          forceFit={this.state.forceFit}
        />
      </div>
    );
  }
}
export default LineChart;